<template>
  <div class="apply_wrap">
    <header>
       <p><img src="../assets/img/left@2x.png"></p>
       <p>申请发票</p>
       <p></p>
    </header>
    <div class="apply_wrap">
      <form>
        <div class="timer">
          <time></time>至<time></time><span>查询</span>
        </div>
        <div class="concater">
          <ul>
            <li>
              <span>消费总计：</span>
              <span>￥1000</span>
            </li>
            <li>
              <span>发票金额：</span>
              <span>￥1000</span>
            </li>
            <li>
              <span>消发票类型：</span>
              <span>普通发票</span>
            </li>
          </ul>
        </div>
        <div class="user_dil">
          <ul>
             <li>
               <div class="leftr">
                 <span>邮寄地址</span>
               </div>
               <div class="righter">
                 <span>山东省泰安市泰山区</span>
                 <span><img src="../assets/img/righter@3x.png"></span>
               </div>
             </li>
             <li>
               <div class="leftr">
                 <span>街道</span>
               </div>
               <div class="righter">
                 <span>选择详细地址</span>
                 <span><img src="../assets/img/righter@3x.png"></span>
               </div>
             </li>
             <li>
               <div class="leftr">
                 <span>姓名</span>
               </div>
               <div class="righter">
                 <span></span>
                 <span></span>
               </div>
             </li>
             <li>
               <div class="leftr">
                 <span>联系方式</span>
               </div>
               <div class="righter">
                 <span></span>
                 <span></span>
               </div>
             </li>
          </ul>
        </div>
        <div class="submiter">提交</div>
      </form>
      
      
      
    </div>
  </div>
</template>

<script>
export default {
  name: 'open_card',
  data () {
    return {
      msg: 'Welcome to mine.vue'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang = 'less'>
@import '../assets/less/style.less';
.apply_wrap {
  height: 100%;
  background: #f7f7f7;
  header {
      width: 100%;
     .px2rem(height,88);
      background: #21d094;
      display: flex;
      align-items: center;
      justify-content: space-between;
      p:nth-child(1) {
        flex: 1;
        .font(30,#fff);
        .padding-left(35);
        img {
          .px2rem(height,39);
          .px2rem(width,39);
        }
      }
      p:nth-child(2) {
        flex: 2;
        text-align: center;
        .font(34,#fff);
      }
      p:nth-child(3) {
        flex: 1;
        text-align: right;
        padding-right: 4%;
        .font(30,#fff);
      }
    }
  form {
    .timer {
      .px2rem(height,80);
      display: flex;
      align-items: center;
      .padding-left(36);
      time {
        /* display: block; */
        .px2rem(height,40);
        .px2rem(width,130);
        .border(1,solid,#999999);
        .border-radius(6);
      }
      span {
        .margin-left(18);
        .px2rem(width,84);
        .line-height(40);
        background: #2bb663;
        text-align: center;
        color: #fff;
        .border-radius(6);
      }
    }
    .concater {
      background: #fff;
      .padding-left(36);
      ul {
        li {
          .line-height(70);
          span:nth-child(1) {
            color: #707070;
          }
          span:nth-child(2) {
            color: #323232;
          }
        }
      }
    }
    .user_dil {
      .padding-left(24);
      .padding-right(24);
      ul {
        li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .border-bottom(1,solid,#999999);
          .line-height(94);
          .padding-left(14);
          .leftr {

          }
          .righter {
            display: flex;
            align-items: center;
            span {
              display: block;
              &:nth-child(2){
                img {
                  display: block;
                  .px2rem(height,32);
                  .px2rem(width,20);
                }
              }
            }
          }
        }
      }
    }
    .submiter {
      .margin-left(24);
      .margin-right(24);
      .line-height(88);
      text-align: center;
      .font(36,#fff);
      background: #2bb663;
     .border-radius(8);
     .margin-top(125);
    }
  }
}

</style>

